<template>
    <div id="map"></div>
</template>

<script>
import maps from "../map";
import {onMounted} from 'vue'
let BM;
let map;


    maps.then(() => {
      BM = window.BM;
      BM.Config.HTTP_URL = "http://localhost:9000";
      map = BM.map('map', 'bigemap.9zv3z6q9', {crs: BM.CRS.EPSG4326, center: [34.71659469604492, 116.91325378417969], zoom: 7, zoomControl: true });
      var marker=BM.marker([34.695467948913574,116.89084053039551]).addTo(map);
       //根据经纬度画标记并添加文字信息
       var latlngs = [
            {
                name:'文字提示',
                path:[
                    [34.68315124511719, 116.86569213867188],
                    [34.683837890625,116.96113586425781],
                    [34.71611022949219, 116.91787719726562],
                    [ 34.71405029296875, 116.87118530273438],
                    [34.67353820800781, 116.87255859375]
                ]
            }
        ];
        for(var k in latlngs){
            (function (item) {
                //创建多边形，并设置填充颜色为红色 ，具体详细API请参见：http://www.bigemap.com/offlinemaps/api/#polygon
                var polygon = BM.polygon(item['path'], {color: 'red'}).addTo(map);
                // 让地图适配当前的线段
                map.fitBounds(polygon.getBounds());
                //给多边形添加一个文字描述，更多API请参见 http://www.bigemap.com/offlinemaps/api/#tooltip-example
                polygon.bindTooltip(item['name'],{permanent:true});
            })(latlngs[k]);
        }
        //
          //iconSize  指定图标的大小
        //iconAnchor 指定图标的偏移量  一般为  width/2 heigh

        //图片地址
        let iconurl = '../assets/images/11.png'

        let small_icon = BM.icon({
            iconUrl: iconurl,
            iconSize: [20, 20],
        })

        let pc_icon = BM.icon({
            iconUrl: iconurl,
            iconSize: [30, 30],
        })
        let bige_icon = BM.icon({
            iconUrl: iconurl,
            iconSize: [50, 50],
        })

        //自定义设定图标 
        let m = BM.marker([34.67353820800781, 116.87255859375], {
            icon: small_icon
        }).addTo(map)

        let m2 = BM.marker([34.71405029296875, 116.87118530273438], {
            icon: pc_icon
        }).addTo(map)

          // var points=addressPoints.map(function (p) { return [p[0], p[1]]; });
          //热力图
            // var points=[];
            // for(var i=0;i<1000;i++){
            //     //随机生成1000个点
            //     points.push(getRandomLatLng());
            // }
            // console.log(points);
            // var heat = BM.heatLayer(points,{radius:20,minOpacity:0.5,gradient:{0.4: 'blue', 0.65: 'lime', 1: 'red'}}).addTo(map);
            // //随机生成经纬度点
            // function getRandomLatLng() {
            //     var min = {lat:30.0,lng:103.194},
            //         max = {lat:30.66,lng:104.399},
            //         lngSpan = max.lng - min.lng,
            //         latSpan = max.lat - min.lat;
            //         //纬度，经度，比重
            //     return [min.lat + latSpan * Math.random(),min.lng + lngSpan * Math.random(),Math.floor(Math.random()*20)]
            // }
            //添加popup
       let marker1 =   BM.marker(map.getCenter()).bindPopup('<p>BIGEMAP</p><p><img src="http://www.bigemap.com/upload/columnthumbnail/20180328/5abb657fa458f.png" alt=""></p>').addTo(map);
        marker1.openPopup()
           //为地图添加一个单击事件，更多事件列表请参见 ：http://www.bigemap.com/offlinemaps/api/#map-baselayerchange
        map.addEventListener('click', function(e) {
                console.log(e);
        });
    });
</script>
<style >
#map {
  height: 100vh;
  width: 100vw;
}
.tittext {
  position: absolute;
  top: 10px;
  left: 50px;
  z-index: 10;
}
</style>
